
var slider=document.querySelector(".slider");
var sliderStr="";
 for(let dom of a1){
    sliderStr+=`
    <li class="slider-list">
    <img src="${dom.img_url}" alt="">
    <div class="title">
       <span>${dom.title}</span><em></em> </div>
  </li>
    `
 }
 slider.innerHTML=sliderStr;
 var point=document.querySelectorAll(".points li");
 var piclunbo=document.querySelector(".picchangebox-lunbo");
 var points=document.querySelector(".points")
 var index1=0;
 function move(){
    for(var i=0;i<point.length;i++){
    point[i].classList.remove("active");
  }
  if(index1==6){
    point[0].classList.add("active")
    }else if(index1>=0 && index1<6){
        point[index1].classList.add("active");
    }
    setTimeout(function(){
        slider.style.transform='translateX('+ -663*index1 +'px)';
        slider.style.transition="all 0.5s";
   },16.7) 
}
 var Timer=setInterval(function(){
    index1++; 
    if(index1==7){
     index1=1;
    slider.style.transform='translateX('+ -663*0+'px)';
    slider.style.transition="all 0s";
    }
    move();
 },1000)
 piclunbo.onmouseenter=function(){
    clearInterval(Timer);
 }
 piclunbo.onmouseleave=function(){
    Timer=setInterval(function(){
        index1++; 
        if(index1==7){
         index1=1;
        slider.style.transform='translateX('+ -663*0+'px)';
        slider.style.transition="all 0s";
        }
        move();
     },1000)
 }
 points.onmouseover=function(e){ 
if(e.target.localName=='li'){
    for(var i=0;i<point.length;i++){
        point[i].classList.remove("active");
  } 
   index1=parseInt(e.target.dataset.a);
  move();
}
}
var clearfix1=document.querySelector(".clearfix1");
var cfStr1="";
for(let dom of a3){
    cfStr1+=`
    <li class="clearfix-list">
    <img src="${dom.img_url}" alt="">
    <p class="gequ">${dom.song}</p>
    <em></em>
</li>
    `
}
clearfix1.innerHTML=cfStr1;
var clearfix2=document.querySelector(".clearfix2");
var cfStr2="";
for(let dom of a4){
    cfStr2+=`
    <li class="clearfix-list">
    <img src="${dom.img_url}" alt="">
    <p class="gequ">${dom.song}</p>
    <em></em>
</li>
    `
}
clearfix2.innerHTML=cfStr2;
var clearfix3=document.querySelector(".clearfix3");
var cfStr3="";
for(let dom of a5){
    cfStr3+=`
    <li class="clearfix-list">
    <img src="${dom.img_url}" alt="">
    <p class="gequ">${dom.song}</p>
    <em></em>
</li>
    `
}
clearfix3.innerHTML=cfStr3;
var clearfix4=document.querySelector(".clearfix4");
var cfStr4="";
for(let dom of a6){
    cfStr4+=`
    <li class="clearfix-list">
    <img src="${dom.img_url}" alt="">
    <p class="gequ">${dom.song}</p>
    <em></em>
</li>
    `
}
clearfix4.innerHTML=cfStr4;



var radiolist1=document.querySelector(".radiolist1");
var currents1=document.querySelectorAll(".current1");
var clearfix=document.querySelectorAll(".clearfix");
radiolist1.onclick=function(e){
    for(var i=0;i<currents1.length;i++){
        currents1[i].classList.remove("active");
        clearfix[i].classList.remove("ac");
    }
    if(e.target.localName=='li'){
        var index=parseInt(e.target.dataset.i);
        currents1[index].classList.add("active");
        clearfix[index].classList.add("ac");
    }
}